@react-aria/toggle

What is @react-aria/toggle?

@react-aria/toggle is a library that provides accessible toggle components for React applications. It is part of the React Aria collection of hooks and components designed to help developers build accessible web applications. The package includes hooks for creating toggle buttons, switches, and other toggleable elements with proper ARIA attributes and keyboard interactions.

What are @react-aria/toggle's main functionalities?

Toggle Button

This code demonstrates how to create a toggle button using the useToggleButton hook from @react-aria/toggle. The button toggles between 'On' and 'Off' states.

import { useToggleButton } from '@react-aria/toggle';
import { useToggleState } from '@react-stately/toggle';

function ToggleButton(props) {
  let state = useToggleState(props);
  let ref = React.useRef();
  let { buttonProps } = useToggleButton(props, state, ref);

  return (
    <button {...buttonProps} ref={ref}>
      {state.isSelected ? 'On' : 'Off'}
    </button>
  );
}

Switch

This code demonstrates how to create a switch component using the useSwitch hook from @react-aria/toggle. The switch toggles between 'On' and 'Off' states.

import { useSwitch } from '@react-aria/switch';
import { useToggleState } from '@react-stately/toggle';

function Switch(props) {
  let state = useToggleState(props);
  let ref = React.useRef();
  let { inputProps } = useSwitch(props, state, ref);

  return (
    <label>
      <input {...inputProps} ref={ref} />
      {state.isSelected ? 'On' : 'Off'}
    </label>
  );
}

Other packages similar to @react-aria/toggle

react-toggle

react-toggle is a package that provides a highly customizable toggle component for React applications. It offers a simple API and supports various customization options for styling and behavior. Compared to @react-aria/toggle, react-toggle focuses more on visual customization and less on accessibility features.

rc-switch

rc-switch is a React component for creating switch elements. It is part of the rc-components collection and provides a simple and flexible API for creating toggle switches. While rc-switch offers basic accessibility features, it may not be as comprehensive as @react-aria/toggle in terms of ARIA attributes and keyboard interactions.

react-switch

react-switch is a lightweight React component for creating toggle switches. It is easy to use and offers basic customization options. Compared to @react-aria/toggle, react-switch is more focused on providing a simple and lightweight solution for toggle switches without extensive accessibility features.

README

@react-aria/toggle

This package is part of react-spectrum. See the repo for more details.